new Vue({
	el: "#header-area",
	data: {},
	methods: {},
	components: {
		"header-bar": {
			template: 
			`
				<div id="header-div1" class="display-flex flex-wrap flex-justify-space-between flex-align-items-start flex-align-content-start">
				<div id="company-index-logo-div" title="南京雷影电子科技有限公司官网首页">
					<a href="index.html"><img id="company-index-logo-img" src="index-img/thunder-logo.png" alt="南京雷影电子科技有限公司logo" /></a>
				</div>
				<div id="click-toggle-header-list" title="展开查看南京雷影科技有限公司为您提供的更多服务">
					<a href="javascript:;">
						<i class="fa fa-list-ul"></i> 更多
					</a>
				</div>
				<ul id="header-products-list" class="display-flex flex-wrap flex-justify-space-around flex-align-items-start flex-align-content-start">
					<li>
						<a href="index.html">
							<i class="fa fa-bolt"></i>
							<span>首页</span>
						</a>

					</li>
					<li>
						<a href="">
							<i class="fa fa-bolt"></i>
							<span>企业服务</span>

						</a>

					</li>
					<li>
						<a href="products-introduction.html">
							<i class="fa fa-codepen"></i>
							<span>产品介绍</span>
							<!--fa fa-code-fork-->
						</a>

					</li>
					<li>
						<a href="./news/news-list.html">
							<i class="fa fa-comments"></i>
							<span>新闻咨询</span>
						</a>

					</li>
					<li>
						<a href="about-us.html">
							<i class="fa fa-globe"></i>
							<span>关于我们</span>
						</a>

					</li>
				</ul>

			</div>
				
			`
			// 以上是header区域的通用HTML结构
		}
	}
	
});